
<div class="layui-container"  style="margin-top:15px;width:800px;">  
  <div class="layui-row  layui-col-space15" >
    <div class="layui-col-md3">
      	<ul id="roleTree" class="ztree" style="margin-top:0;"></ul>
    </div>
    <div class="layui-col-md9"  style=" height:400px; overflow-y:auto">
	<input class="lay-input" type="hidden" id = "roleId" name="roleId" th:value="${roleId}">
	<input class="lay-input" type="hidden" id = "tableId" name="tableId">
	<form  class="layui-form" action="" id="contentForm" lay-filter="contentForm">
<!-- 		<table class="layui-table"> -->
<!--   <colgroup> -->
<!--     <col width="150"> -->
<!--     <col width="200"> -->
<!--     <col> -->
<!--   </colgroup> -->
<!--   <thead> -->
<!--     <tr> -->
<!--       <th>昵称</th> -->
<!--       <th>加入时间</th> -->
<!--       <th>签名</th> -->
<!--     </tr>  -->
<!--   </thead> -->
<!--   <tbody> -->
<!--     <tr> -->
<!--       <td>贤心</td> -->
<!--       <td>2016-11-29</td> -->
<!--       <td>人生就像是一场修行</td> -->
<!--     </tr> -->
<!--     <tr> -->
<!--       <td>许闲心</td> -->
<!--       <td>2016-11-28</td> -->
<!--       <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td> -->
<!--     </tr> -->
<!--   </tbody> -->
<!-- </table> -->
	</form>
    </div>
  </div>
  <div class="layui-row" style="margin-top:10px;">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="text-align:center;">
          <button class="layui-btn" lay-submit="" lay-filter="formSubmit">保存</button>
    </div>
  </div>
  
</div>

<script>
$(function(){
layui.use(['form','layer','laytpl'], function(){
	var form = layui.form;
	
	function zTreeOnClick(event, treeId, treeNode) {
	var tableId = treeNode.id
	$("#tableId").val(tableId);
// 	layer.msg(tableId);
	$("#contentForm").load("/sys/role/table/field/fields?tableId="+tableId+"&roleId="+$("#roleId").val(),function(data){
// 		$("#contentTab tbody").append($("#blankTpl tr").parent().html());
		form.render();
	});
};
	
	//复选框表头操作
	form.on("checkbox(headCheckBox)",function(data){
		
		 var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');  
	        child.each(function(index, item){  
	          item.checked = data.elem.checked;  
	        });  
	        form.render('checkbox'); 
	});
	
		
	//form 提交
	 form.on('submit(formSubmit)', function(data){
		//获取所有的checkbox
		var checkedBox = $("#contentTab").find('tbody input[type="checkbox"]:checked');
		var removeids = [];
		checkedBox.each(function(index, item){
			   var id = $(item).val();
			   if(id!=null&&id!=''){
				   //获取所有的id列表
				   removeids.push(id);
			   }
	     }); 
// 		 layer.msg(removeids.length);
// 		 console.log(removeids);
// 		 layer.msg($("#roleId").val());
		 var data = {};
		data['ids'] = removeids;
		data['roleId'] = $("#roleId").val();
		data['tableId'] = $("#tableId").val();
		layer.msg(data['ids']+":"+data['roleId']+":"+data['tableId']);
		$.ajax({
			type: "post",
			 type: "post",
             url: "/sys/role/table/saveField",
             data: JSON.stringify(data),
             type:"post",
			 contentType:"application/json",
             success: function(data){
             	if(data.code==200){
             		layer.msg(data.message)
             	}else{
             		layer.msg(data.message)
             	}
             }
		});
	 });
	
	
	
var setting = {
			
	        view: {
	            dblClickExpand: false
	        },
	        data: {
	            simpleData: {
	                enable: true
	            }
	        },
	        callback: {
//	             beforeClick: beforeClick,
	           onClick:zTreeOnClick//单击事件
	        }
	    };
	 $.ajax({
            type: "post",
            url: "/sys/role/table/findAlltable",
            type:"post",
			 contentType:"application/json",
            success: function(data){
            	if(data.code==200){
  					 $.fn.zTree.init($("#roleTree"), setting, data.result);
  					 
  					var zTree = $.fn.zTree.getZTreeObj("roleTree");//获取ztree对象  
  	                var node = zTree.getNodeByParam('id', 1);//获取id为1的点  
  	                zTree.selectNode(node);//选择点  
  	                zTree.setting.callback.onClick(null, zTree.setting.treeId, node);//调用事
            	}else{
            		layer.msg(data.message)
            	}
            }
		});
	 
	
	 
});

});



</script>
